<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
  <div class="post-form">
    <el-dialog v-loading="loading" :fullscreen="false" :destroy-on-close="true" title="新建" :visible.sync="show"
      width="550px" @closed="onClose" :close-on-click-modal="false">

      <el-form :model="newhouse" label-position="right" label-width="120px" size="mini" v-loading="loading">
        <el-form-item label="城市/区域">
          <city-district-selector size="small" custom-style="width: 320px" @change="districtChange"
            v-model="newhouse.district_id"></city-district-selector>
        </el-form-item>

        <el-form-item label="小区">
          <poi-search placeholder="搜索小区" size="mini" custom-style="width:320px" v-model="newhouse.sub_district_name"
            @change="poiChange"></poi-search>
        </el-form-item>

        <el-form-item label="标的物">
          <el-input v-model="newhouse.title" style="width: 320px" placeholder="" maxlength="100" minlength="5"
            show-world-limit></el-input>
        </el-form-item>

        <el-form-item label="房源地址">
          <el-input style="width: 320px" size="small" v-model="newhouse.address" placeholder></el-input>
        </el-form-item>

        <el-form-item label="地图导航">
          <el-tag size="mini" v-if="newhouse.latitude && newhouse.longitude">已设置（经度: {{ newhouse.latitude }}，纬度:
            {{ newhouse.longitude }}）</el-tag>
          <el-tag size="mini" v-else>未设置</el-tag>
          <MapMarkerDialogButton @change="markerChange" :lat.sync="newhouse.latitude" :lng.sync="newhouse.longitude">
          </MapMarkerDialogButton>
        </el-form-item>

        <el-form-item label="朝向">
          <enumeration-selector custom-style="width:320px" v-model="newhouse.position" size="mini" :editable="false"
            cat="house_position" />
        </el-form-item>

        <el-form-item label="面积">
          <el-input style="width: 320px" type="number" v-model="newhouse.area" placeholder="请输入面积"></el-input>
        </el-form-item>

        <!-- <el-form-item label="状态">
          <enumeration-selector custom-style="width:320px" v-model="newhouse.status" size="mini" :editable="false"
            cat="auction_house_status" />
        </el-form-item> -->

        <el-form-item label="开始竞拍时间">
          <el-date-picker style="width: 320px" v-model="newhouse.start_at" type="datetime" placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" @change="handleStartChange">
          </el-date-picker>
          <info-tip tipText='开始竞拍时间设置保存后无法修改'></info-tip>
        </el-form-item>
        <el-form-item label="结束竞拍时间">
          <el-date-picker style="width: 320px" v-model="newhouse.end_at" type="datetime" placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" :picker-options="endPickerOptions">
          </el-date-picker>
          <info-tip tipText='结束竞拍时间设置保存后无法修改'></info-tip>
        </el-form-item>

        <el-form-item label="保证金(元)">
          <el-input style="width: 320px" type="number" v-model="newhouse.bond" placeholder="请输入保证金"></el-input>
        </el-form-item>

        <el-form-item label="加价幅度(元)">
          <el-input style="width: 320px" type="number" v-model="newhouse.increase_range"
            placeholder="请输入加价幅度"></el-input>
        </el-form-item>

        <el-form-item label="起拍价(元)">
          <el-input style="width: 320px" type="number" v-model="newhouse.start_price" placeholder="请输入起拍价"></el-input>
        </el-form-item>

        <el-form-item label="评估价(元)">
          <el-input style="width: 320px" type="number" v-model="newhouse.evaluation_price"
            placeholder="请输入评估价"></el-input>
        </el-form-item>

        <el-form-item label="联系方式">
          <el-input style="width: 157px" v-model="newhouse.contact_name" placeholder="联系人"></el-input>
          <el-input style="width: 157px" v-model="newhouse.contact_mobile" placeholder="联系电话"></el-input>
        </el-form-item>

        <el-form-item label="竞价规则">
          <el-input style="width: 320px" type="textarea" :rows="3" v-model="newhouse.bidding_rules"
            placeholder="请输入竞价规则"></el-input>
        </el-form-item>


        <el-form-item size="large">
          <el-button type="primary" size="large" :loading="loading" @click="submitHandle"
            icon="el-icon-check">保存，并进入下一步</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped></style>

<script>
import { mapGetters } from "vuex";
import {
  createAuctionHouse,
} from "@/api/auctionhouse";
import { getDistrict } from "@/api/district";
import CityDistrictSelector from "@/components/CityDistrictSelector";
import MapMarkerDialogButton from "@/components/MapMarkerDialogButton";
import PoiSearch from "@/components/PoiSearch";

export default {
  name: "NewForm",
  components: {
    CityDistrictSelector,
    MapMarkerDialogButton,
    PoiSearch,
  },
  props: {
    pid: { type: Number, default: null },
  },

  computed: {
    ...mapGetters(["user"]),

    canSubmit: function () {
      var p = this.post;
      if (!p.group) {
        return false;
      }
      if (!p.title) {
        return false;
      }
      if (!p.district_id) {
        return false;
      }
      return true;
    },
    endPickerOptions() {
      let minDate = null;

      if (this.newhouse.start_at) {
        // 获取 start_at 的日期对象
        let startDate = new Date(this.newhouse.start_at);

        // 计算 start_at 的一天前的日期
        let oneDayBefore = new Date(startDate);
        oneDayBefore.setDate(startDate.getDate() - 1);

        // 设置结束时间选择器的最小日期为 start_at 的一天前
        minDate = oneDayBefore;
      }

      return {
        disabledDate: time => {
          // 禁用早于 minDate 的日期
          if (minDate) {
            return time.getTime() <= minDate.getTime();
          } else {
            return false;
          }
        }
      };
    },
  },

  data() {
    return {
      loading: false,
      show: false,
      newhouse: {
        district_id: null,
        latitude: null,
        longitude: null,
        title: "",
        address: "",
        position: "",
        start_at: "",
        end_at: "",
      },
    };
  },

  created: function () {

  },

  methods: {
    handleStartChange() {
      // 当开始时间改变时，重置结束时间
      this.newhouse.end_at = '';
    },
    poiChange: function (poi) {
      console.log(poi);
      this.$set(this.newhouse, "sub_district_name", poi.title);
      // 创建小区，生成小区id
      this.newhouse.latitude = poi.location.lat;
      this.newhouse.longitude = poi.location.lng;
      this.newhouse.address = poi.address;
    },
    createHandle: function (pid) {
      this.show = false;
      this.newhouse = {
        district_id: null,
      };
      this.$emit("create", pid);
    },

    openDialog: function () {
      this.show = true;
    },
    closeDialog: function () {
      this.show = false;
    },

    onClose: function () {
      this.show = false;
      this.post = {};
      this.$emit("close", null);
    },

    onSubmit: function () { },

    districtChange: function (did) {
      getDistrict(did).then((resp) => {
        // Vue.set(this.newhouse, "city_id", resp.data.city_id);
        // this.newhouse.city_id = resp.data.city_id;
        this.$set(this.newhouse, "city_id", resp.data.city_id);
      });
    },

    markerChange: function (marker) {
      if (!marker) {
        return false;
      }

      // var house = this.newhouse;
      // house.latitude = marker.lat;
      // house.longitude = marker.lng;
      // this.newhouse = house;
      this.$set(this.newhouse, "latitude", marker.lat);
      this.$set(this.newhouse, "longitude", marker.lng);
    },

    submitHandle: function () {
      this.loading = true;
      var _res = this.validate();

      var isOk = _res[0],
        err = _res[1];
      if (!isOk) {
        this.loading = false;
        this.$message.error(err);
        return false;
      }
      var data = JSON.parse(JSON.stringify(this.newhouse));

      createAuctionHouse(data).then((resp) => {
        this.loading = false;
        if (resp.status == 0) {
          this.createHandle(resp.data);
          //   this.$emit("create", resp.data);
        }
      });
    },

    validate: function () {
      var p = this.newhouse;

      if (!p.district_id) {
        return [false, "请选择项目所在区域"];
      }
      if (!p.sub_district_name) {
        return [false, "请选择项目所在小区"];
      }

      if (!p.title || p.title.length < 1) {
        return [false, "请填写标的物"];
      }

      if (!p.address) {
        return [false, "请填写地址"];
      }
      if (!p.position) {
        return [false, "请选择朝向"];
      }
      if (!p.area) {
        return [false, "请填写面积"];
      }
      // if (!p.status) {
      //   return [false, "请选择状态"];
      // }
      if (!p.bond) {
        return [false, "请填写保证金"];
      }
      if (!p.increase_range) {
        return [false, "请填写加价幅度"];
      }
      if (!p.start_price) {
        return [false, "请填写起拍价"];
      }
      if (!p.evaluation_price) {
        return [false, "请填写评估价"];
      }
      if (!p.bidding_rules) {
        return [false, "请填写竞价规则"];
      }
      if (!p.latitude || !p.longitude) {
        return [false, "请选择地图位置"];
      }
      if (!p.start_at) {
        return [false, "请选择开始时间"];
      }
      if (!p.end_at) {
        return [false, "请选择结束时间"];
      }
      // 判断开始时间是否小于结束时间
      let startAtDate = new Date(p.start_at);
      let endAtDate = new Date(p.end_at);
      if (startAtDate > endAtDate) {
        return [false, "开始时间不能大于结束时间"];
      }
      if (!p.contact_name) {
        return [false, "请输入联系人"];
      }
      if (!p.contact_mobile) {
        return [false, "请输入联系电话"];
      }


      return [true, "ok"];
    },
  },
};
</script>
